<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 4000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            margin-left: 6px;

        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
            z-index: 1000;
        }

        #arr span {

            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;


            font-weight: bold;
            font-family: "黑体";

            left: auto;
            opacity: 0.3;
            color: #ffffff;
        }

        #arr #right {

            right: 7px;
            left: auto;

        }
    </style>
    <!-- <script src="js/common.js"></script> -->

</head>

<body>
    <div class="all" id="box">
        <div class="screen">
            <ul>
                <li><img src="./img/focus0.jpg" width="500" height="200" /></li>
                <li><img src="./img/focus1.jpg" width="500" height="200" /></li>
                <li><img src="./img/focus2.jpg" width="500" height="200" /></li>
                <li><img src="./img/focus3.jpg" width="500" height="200" /></li>
                <li><img src="./img/focus4.jpg" width="500" height="200" /></li>
                <li><img src="./img/focus5.jpg" width="500" height="200" /></li>
                <li><img src="./img/focus6.jpg" width="500" height="200" /></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr">
            <span id="left">&lt;</span><span id="right">&gt;</span>
        </div>
    </div>

</body>
<script src="./animate.js"></script>

<script src="js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        // 获取图片的宽度
        // let imgWidth = document.querySelector(".screen");
        let imgWidth = $(".screen")[0].offsetWidth;
        // 页面上有多少张图片
        let count = $("ul>li").length;
        // console.log(count);
        let ul = $("ul")[0];
        let timer = null;
        console.log(count);
        console.log(imgWidth);
        $("#box").mouseenter(function () {
            $("#arr").show();
           clearInterval(timer)
        })
        $("#box").mouseleave(function () {
            $("#arr").hide();
            clearInterval(timer)
            timer = setInterval(function(){
                $("#right").click()
            },2000);
            

        })
        // 生成ol li 
        for (let i = 0; i < count; i++) {
            // 创建li
            let li = document.createElement("li");
            li.innerHTML = i + 1;
            $("ol").append(li);


        }
        // console.log($("ul")[0]);

        // 点击li点亮，并且切换对应的图片
        $("ol>li").click(function () {
           
            let index = $(this).index();
            console.log(index);
            $(this).addClass("current").siblings("li").removeClass("current");
            animate(ul, -index * imgWidth);
            num = index;
        });
        
        let num = 0; //记录li的索引
        $("#right").click(function(){
            
            if(num == count){
                num = 0;
                ul.style.left = "0px";
            }
            num++;
            if(num < count){
                $("ol>li").eq(num).click();
            } else {
                animate(ul,-num * imgWidth);
                $("ol>li").eq(0).addClass("current").siblings("li").removeClass("current");
            }
                
        })    
        
        $("#left").click(function(){
            if(num == 0){
      
                num = count;
                ul.style.left = -num * imgWidth;
            }
            num--;
            $("ol>li").eq(num).click();
        })

        // 无缝滚动
        var firstLi = ul.children[0];
        var cloneLi = firstLi.cloneNode(true);
        ul.appendChild(cloneLi);
        
        timer = setInterval(function(){
                $("#right").click()
         },2000);
            
        
    })
</script>

</html>